<template>
  <div class="main-layout">
    <div class="main-top-lay">
      <Header style="flex:1;" :headHei='42' :title="systemTitle" :logo="logo" :user="userInfo"/>
    </div>
    <div class="left-main-content" ref="refContent">
      <sidebar ref="refSideBar" :menus="menus" :name="''" :active-menu="activeMenu" :style="{'height': hei + 'px'}" />
      <div class="main-router-lay" :style="{'width': wid + 'px', 'height': hei + 'px'}" >
        <RouteView/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useStore} from "@/stores";
import {computed, onMounted, ref, shallowRef} from "vue";

import Sidebar from './Sidebar/index.vue'
import Header from "@/components/common/PageTopNav.vue";
import RouteView from "@/components/common/RouteWrap.vue";

const store = useStore();

const logo = ref(store.settings.logo);
const systemTitle = shallowRef(store.settings.title);

const activeMenu = ref(store.getHomeRoute());
const menus = ref<MenuType[]>(store.menus || []);

const refContent = ref();
const refSideBar = ref();

const hei = ref(0);
const wid = ref(0);

let observer: ResizeObserver | null = null;

const userInfo = computed(() => {
  return store.getUser();
});

const handleResize = (entries: any) => {
  for (const entry of entries) {
    const {width, height} = entry.contentRect;
    hei.value = height;
    wid.value = width - refSideBar.value.getSideBarWid();
  }
}

onMounted(() => {
  if (refContent.value) {
    observer = new ResizeObserver(handleResize);
    observer.observe(refContent.value);
  }
})

</script>

<style scoped>

.main-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-top-lay {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.left-main-content {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
  transition: margin-left .28s;
}

.main-router-lay {
  background-color: #fff;
}

</style>
